<!-- components/ErrorMessage.vue -->
<template>
  <transition name="slide">
    <div
      v-show="visible"
      class="error-message"
      @click="close"
    >
      {{ message }}
    </div>
  </transition>
</template>

<script>
export default {
  name: 'ErrorMessage',
  data() {
    return {
      visible: false,
      message: '发生错误',
      duration: 3000,
      timer: null
    }
  },
  methods: {
    show(options) {
      this.message = options.message || '发生错误'
      this.duration = options.duration || 3000
      this.visible = true

      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.visible = false
      }, this.duration)
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 24px;
  background: #f56c6c;
  color: white;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  cursor: pointer;
  min-width: 200px;
  text-align: center;
  transition: transform 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>